<template>
  <div class="wrap">
    <div class="types">
        <h1 style="text-align:left">商品分类</h1>
      <div class="form typeForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="添加商品类型：">
            <el-input v-model="types.type_name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain @click="addOne(types)">确定添加</el-button>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="修改商品类型：">
            <el-input v-model="updateTypes.type_name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="updateOne(updateTypes)">确定修改</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <el-table :data="goodstypes" style="width: 100%">
        <el-table-column label="名称" width="250">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row._id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="getOne(scope.row._id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delOne(scope.row._id)" :disabled="isbutton">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import Axios from "axios";
const {
  mapState,
  mapActions,
  mapMutations,
  mapGetters
} = createNamespacedHelpers("goodsStore");
export default {
  data() {
    return {

    //   控制按钮
        isbutton:false,
      formInline: {
        user: "",
        region: ""
      },
      //新增用的
      types: {
        type_name: ""
      },
      //修改用的
      updateTypes: {
        type_name: ""
      }
    };
  },
  computed: {
    //获取所有商品类型
    ...mapState(["goodstypes"])
  },
  mounted() {
    this.getTypesAsync();
  },
  watch: {
    typesValue() {
      this.updateTypes.type_name = this.typesValue;
    }
  },
  methods: {
    //获取所有商品类型
    ...mapActions(["getTypesAsync"]),
    //新增
    addOne(types) {
      if (types.type_name) {
        Axios.post("types/add", types).then(res => {
          if (res) {
            this.types.type_name = "";
            this.$notify({
              title: "成功",
              message: "新增成功",
              type: "success",
              duration: 2000
            });
          }
          this.getTypesAsync();
        });
      } else {
        this.$notify({
          title: "失败",
          message: "请输入类型",
          type: "error",
          duration: 2000
        });
      }
    },
    //修改 1获取
    getOne(id) {
      Axios.get("types/getOne", { params: { _id: id } }).then(res => {

        this.updateTypes = res.data[0];
        this.isbutton=true
       
      });
    },
    //修改 2确定修改
    updateOne(updateTypes) {
       if (updateTypes.type_name) {
      Axios.post("types/updateOne", updateTypes).then(res => {
        if (res) {
          this.updateTypes.type_name = "";
           this.isbutton=false
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success"
          });

        }
        this.getTypesAsync();
      });
       }
       else {
        this.$notify({
          title: "失败",
          message: "不能为空奥",
          type: "error",
          duration: 2000
        });
       }
       
    },
    //删除
    delOne(id) {
      console.log(id);
      Axios.get("goods/getTypes", { params: { typesId: id } }).then(res => {
        console.log(res);
        if (res.data.length === 0) {
          Axios.post("/types/del", { _id: id }).then(res => {
            this.getTypesAsync();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success"
            });
          });
        } else {
          console.log("我有数据");
          this.open();
        }
      });
    },
    //弹出框
    open() {
      const h = this.$createElement;
      this.$msgbox({
        title: "NO！",
        message: h("p", null, [h("span", null, "这个类别不能删除 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      });
    }
  }
};
</script>

<style scoped>
.wrap {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.types {
  width: 90%;
  text-align: center;
}
.el-form-item {
  margin-bottom: 10px;
}

.demo-form-inline {
  display: flex;
}
span {
  margin-left: 0 !important;
}
/* .typeForm{
  display: flex;
  justify-content: space-between;
} */
</style>